<template>
  <VPage edit class="no-border" :footer="{ offset: 10 }">
    <el-form label-width="150px">
      <!-- 估算销量规则设置 -->
      <el-card shadow="never">
        <template #header>估算销量规则设置</template>
        <el-alert title="说明" type="info" show-icon :closable="false"> 如1-30天销量/30*50%+31-60天销量/30*30%+61-90天销量/30*20%，比例参数根据实际情况填写 </el-alert>
        <div class="flex mt-3">
          <strong class="w-36 text-right mr-2 text-sm text-gray-500 leading-8">加权平均日销量</strong>
          <div class="flex flex-col gap-y-4">
            <div class="flex items-center">
              <VGroup>
                <el-form-item label-width="0" class="mb-0" :error="errors['estimate_sale_rule.1.start']">
                  <el-input-number v-model="form.estimate_sale_rule[1].start" :controls="false" :min="0" :step="1" :precision="0" class="w-20" />
                </el-form-item>
                <div class="v-group-item">-</div>
                <el-form-item label-width="0" class="mb-0" :error="errors['estimate_sale_rule.1.end']">
                  <el-input-number v-model="form.estimate_sale_rule[1].end" :controls="false" :min="0" :step="1" :precision="0" class="w-20" />
                </el-form-item>
                <div class="v-group-item">天销量</div>
              </VGroup>
              <div class="mx-2">/</div>
              <VGroup>
                <el-form-item label-width="0" class="mb-0" :error="errors['estimate_sale_rule.1.day']">
                  <el-input-number v-model="form.estimate_sale_rule[1].day" :controls="false" :min="0" :step="1" :precision="0" class="w-20" />
                </el-form-item>
                <div class="v-group-item">*</div>
                <el-form-item label-width="0" class="mb-0" :error="errors['estimate_sale_rule.1.percent']">
                  <el-input-number v-model="form.estimate_sale_rule[1].percent" :controls="false" :min="0" :step="1" :precision="0" class="w-20" />
                </el-form-item>
                <div class="v-group-item">%</div>
              </VGroup>
              <div class="mx-2">+</div>
            </div>
            <div class="flex items-center">
              <VGroup>
                <el-form-item label-width="0" class="mb-0" :error="errors['estimate_sale_rule.2.start']">
                  <el-input-number v-model="form.estimate_sale_rule[2].start" :controls="false" :min="0" :step="1" :precision="0" class="w-20" />
                </el-form-item>
                <div class="v-group-item">-</div>
                <el-form-item label-width="0" class="mb-0" :error="errors['estimate_sale_rule.2.end']">
                  <el-input-number v-model="form.estimate_sale_rule[2].end" :controls="false" :min="0" :step="1" :precision="0" class="w-20" />
                </el-form-item>
                <div class="v-group-item">天销量</div>
              </VGroup>
              <div class="mx-2">/</div>
              <VGroup>
                <el-form-item label-width="0" class="mb-0" :error="errors['estimate_sale_rule.2.day']">
                  <el-input-number v-model="form.estimate_sale_rule[2].day" :controls="false" :min="0" :step="1" :precision="0" class="w-20" />
                </el-form-item>
                <div class="v-group-item">*</div>
                <el-form-item label-width="0" class="mb-0" :error="errors['estimate_sale_rule.2.percent']">
                  <el-input-number v-model="form.estimate_sale_rule[2].percent" :controls="false" :min="0" :step="1" :precision="0" class="w-20" />
                </el-form-item>
                <div class="v-group-item">%</div>
              </VGroup>
              <div class="mx-2">+</div>
            </div>
            <div class="flex items-center">
              <VGroup>
                <el-form-item label-width="0" class="mb-0" :error="errors['estimate_sale_rule.3.start']">
                  <el-input-number v-model="form.estimate_sale_rule[3].start" :controls="false" :min="0" :step="1" :precision="0" class="w-20" />
                </el-form-item>
                <div class="v-group-item">-</div>
                <el-form-item label-width="0" class="mb-0" :error="errors['estimate_sale_rule.3.end']">
                  <el-input-number v-model="form.estimate_sale_rule[3].end" :controls="false" :min="0" :step="1" :precision="0" class="w-20" />
                </el-form-item>
                <div class="v-group-item">天销量</div>
              </VGroup>
              <div class="mx-2">/</div>
              <VGroup>
                <el-form-item label-width="0" class="mb-0" :error="errors['estimate_sale_rule.3.day']">
                  <el-input-number v-model="form.estimate_sale_rule[3].day" :controls="false" :min="0" :step="1" :precision="0" class="w-20" />
                </el-form-item>
                <div class="v-group-item">*</div>
                <el-form-item label-width="0" class="mb-0" :error="errors['estimate_sale_rule.3.percent']">
                  <el-input-number v-model="form.estimate_sale_rule[3].percent" :controls="false" :min="0" :step="1" :precision="0" class="w-20" />
                </el-form-item>
                <div class="v-group-item">%</div>
              </VGroup>
            </div>
          </div>
        </div>
      </el-card>

      <!-- 备货规则设置 -->
      <el-card shadow="never" class="mt-2">
        <template #header>备货规则设置</template>
        <el-alert title="说明" type="info" show-icon :closable="false">
          备货天数：系统检测到需要补货时，系统计算默认需求数量；<br />

          <!-- 采购天数：包含采购下单，供应商生成，供应商运输天数；<br /> -->

          本地仓处理天数：国内中转仓入库、贴标、打包出库的天数；<br />

          <!-- 运输天数：头程运输到海外仓仓库签收的天数；<br /> -->

          海外仓上架天数 ：海外仓仓库入库上架的天数；<br />

          安全天数：为防止断货，增加额外备货库存；<br />

          采购频次：备货分析更新的频率；
        </el-alert>
        <div class="mt-3">
          <el-form-item label="备货天数">
            <el-input-number v-model="form.demand_rule.demand_day" controls-position="right" :min="0" :step="1" :precision="2" class="w-64" />
          </el-form-item>
          <el-form-item label="本地仓处理天数">
            <el-input-number v-model="form.demand_rule.middle_process_day" controls-position="right" :min="0" :step="1" :precision="2" class="w-64" />
          </el-form-item>
          <el-form-item label="海外上架天数">
            <el-input-number v-model="form.demand_rule.oversea_shelve_day" controls-position="right" :min="0" :step="1" :precision="2" class="w-64" />
          </el-form-item>
          <el-form-item label="安全天数">
            <div class="flex flex-col gap-2">
              <div v-for="(d, i) in options.activation?.filter((d) => d.value !== 3)" :key="i" class="flex items-center gap-2">
                <div class="whitespace-nowrap">{{ d.label }}</div>
                <el-input-number v-model="form.demand_rule.safe_day[d.value]" controls-position="right" :min="0" :step="1" :precision="2" class="w-60" />
              </div>
            </div>
          </el-form-item>
          <el-form-item label="采购频次">
            <el-input-number v-model="form.demand_rule.purchase_frequency" controls-position="right" :min="0" :step="1" :precision="2" class="w-64" />
          </el-form-item>
          <el-form-item label="运输天数(美国)">
            <el-button v-if="!form.demand_rule.transit_day?.length" type="primary" link @click="form.demand_rule.transit_day.push({ department_id: null, us_area: null })">添加</el-button>
            <div v-else class="flex flex-col gap-2 w-full">
              <div v-for="(d, i) in form.demand_rule.transit_day" :key="i" class="grid grid-cols-3 gap-2">
                <VCascader v-model="d.department_id" placeholder="需求部门" type="1" multiple collapse-tags class="w-full" />
                <VSelect v-model="d.us_area" placeholder="请选择" :options="options.us_area" class="w-full" />
                <div>
                  <el-button v-if="!i" type="primary" link @click="form.demand_rule.transit_day.push({ department_id: null, us_area: null })">添加</el-button>
                  <el-button v-else type="danger" link @click="form.demand_rule.transit_day.splice(i, 1)">移除</el-button>
                </div>
              </div>
            </div>
          </el-form-item>
        </div>
      </el-card>

      <!-- 预估销量系数设置 -->
      <el-card shadow="never" class="mt-2">
        <template #header>预估销量系数设置</template>
        <el-alert title="说明" type="info" show-icon :closable="false" class="mb-3"> 系统预估销量=销售系数*加权日平均销量，各销售系数为空时，默认为1。 </el-alert>
        <el-form-item label="周上升且月上升">
          <el-input-number v-model="form.estimate_sale_ratio[1]" controls-position="right" :min="0" :step="1" :precision="2" class="w-64" placeholder="请填写系数" />
        </el-form-item>
        <el-form-item label="周下降且月上升">
          <el-input-number v-model="form.estimate_sale_ratio[2]" controls-position="right" :min="0" :step="1" :precision="2" class="w-64" placeholder="请填写系数" />
        </el-form-item>
        <el-form-item label="周上升且月下降">
          <el-input-number v-model="form.estimate_sale_ratio[3]" controls-position="right" :min="0" :step="1" :precision="2" class="w-64" placeholder="请填写系数" />
        </el-form-item>
        <el-form-item label="周下降且月下降">
          <el-input-number v-model="form.estimate_sale_ratio[4]" controls-position="right" :min="0" :step="1" :precision="2" class="w-64" placeholder="请填写系数" />
        </el-form-item>
        <el-form-item label="周持平或月持平">
          <el-input-number v-model="form.estimate_sale_ratio[5]" controls-position="right" :min="0" :step="1" :precision="2" class="w-64" placeholder="请填写系数" />
        </el-form-item>
      </el-card>

      <!-- 滞销品规则设置 -->
      <!-- <el-card shadow="never" class="mt-2">
        <template #header>滞销品规则设置</template>
        <div class="grid grid-cols-2 gap-x-3">
          <el-form-item label="产品可售天数">
            <div class="v-group-item">大于</div>
            <el-input-number v-model="form.value" :controls="false" :min="0" :step="1" :precision="2" class="w-36 mx-2" />
            <div class="v-group-item">天，设置为呆滞品</div>
          </el-form-item>
        </div>
      </el-card> -->

      <!-- 无需补货规则设置 -->
      <el-card shadow="never" class="mt-2">
        <template #header>无需补货规则设置</template>
        <el-form-item label="无需补货估算销量">
          <div class="v-group-item">小于等于</div>
          <el-input-number v-model="form.not_replenishment_rule.sale_num" :controls="false" :min="0" :step="1" :precision="2" class="w-36 mx-2" />
          <div class="v-group-item">时，系统自动设置不补货；系统定时检测</div>
        </el-form-item>
        <el-form-item label="设置不补货的sku状态">
          <el-checkbox-group v-model="form.not_replenishment_rule.sku_status">
            <el-checkbox v-for="d in options.sku_sale_status" :label="d.value" :key="d.value">{{ d.label }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-card>

      <!-- 智能补货配置 -->
      <el-card shadow="never" class="mt-2 mb-2">
        <template #header>智能补货配置</template>
        <el-alert title="说明" type="info" show-icon :closable="false" class="mb-3">当可售天数&lt;基础LT天数时，系统认定为对应SKU需要补货，当前规则可过滤少量缺货的SKU。</el-alert>
        <el-button type="primary" class="mb-2" @click="form.demand_auto_rule.push({ day: null, symbol: 1, sale_num: null, member_day: null, demand_day: null })">添加</el-button>
        <div v-for="(d, i) in form.demand_auto_rule" :key="i" class="flex items-center text-sm mb-4">
          <el-input-number v-model="d.day" :controls="false" :min="0" :step="1" :precision="0" class="w-24" placeholder="请输入" />
          <div class="whitespace-nowrap mx-2">天销量区间在</div>
          <VGroup>
            <el-input-number v-model="d.sale_num_start" :controls="false" :min="i ? form.demand_auto_rule[i - 1].sale_num_end : 0" :step="1" :precision="0" class="w-24" placeholder="请输入" />
            <div class="v-group-item">-</div>
            <el-input-number v-model="d.sale_num_end" :controls="false" :min="d.sale_num_end" :max="99999999" :step="1" :precision="0" class="w-24" placeholder="请输入" />
          </VGroup>
          <div class="whitespace-nowrap mx-2">备货频率为</div>
          <el-input-number v-model="d.member_day" :controls="false" :min="0" :step="1" :precision="0" class="w-24" placeholder="请输入" />
          <div class="whitespace-nowrap mx-2">天一次，每次备</div>
          <el-input-number v-model="d.demand_day" :controls="false" :min="0" :step="1" :precision="0" class="w-24" placeholder="请输入" />
          <div class="whitespace-nowrap mx-2">天的库存；</div>
          <el-button link type="primary" @click="form.demand_auto_rule.splice(i, 1)">移除</el-button>
        </div>
      </el-card>

      <!-- 产品活跃度规则 -->
      <el-card shadow="never" class="mt-2 mb-2">
        <template #header>产品活跃度规则</template>
        <el-divider class="mt-1 mb-5">设置产品活跃度规则</el-divider>
        <div class="flex items-center text-sm mb-4">
          <div class="whitespace-nowrap mr-2">最近</div>
          <el-form-item label-width="0" class="mb-0" :error="errors['activation_rule.1.day']">
            <el-input-number v-model="form.activation_rule[1].day" :controls="false" :min="0" :step="1" :precision="2" class="w-24" placeholder="天数" />
          </el-form-item>
          <div class="whitespace-nowrap mx-2">天，商品销量在</div>
          <VGroup>
            <el-form-item label-width="0" class="mb-0" :error="errors['activation_rule.1.sale_start']">
              <el-input-number v-model="form.activation_rule[1].sale_start" :controls="false" :min="0" :step="1" :precision="2" class="w-24" placeholder="销量" />
            </el-form-item>
            <div class="v-group-item">-</div>
            <el-form-item label-width="0" class="mb-0" :error="errors['activation_rule.1.sale_end']">
              <el-input-number v-model="form.activation_rule[1].sale_end" :controls="false" :min="0" :step="1" :precision="2" class="w-24" placeholder="销量" />
            </el-form-item>
          </VGroup>
          <div class="whitespace-nowrap mx-2">范围内，且呆滞库龄天数在</div>
          <VGroup>
            <el-form-item label-width="0" class="mb-0" :error="errors['activation_rule.1.stagnation_start']">
              <el-input-number v-model="form.activation_rule[1].stagnation_start" :controls="false" :min="0" :step="1" :precision="2" class="w-24" placeholder="天数" />
            </el-form-item>
            <div class="v-group-item">-</div>
            <el-form-item label-width="0" class="mb-0" :error="errors['activation_rule.1.stagnation_end']">
              <el-input-number v-model="form.activation_rule[1].stagnation_end" :controls="false" :min="0" :step="1" :precision="2" class="w-24" placeholder="天数" />
            </el-form-item>
          </VGroup>
          <div class="whitespace-nowrap ml-2">范围内时，定义为 <span class="text-red-600">重点</span></div>
        </div>

        <div class="flex items-center text-sm my-5">
          <div class="whitespace-nowrap mr-2">最近</div>
          <el-form-item label-width="0" class="mb-0" :error="errors['activation_rule.2.day']">
            <el-input-number v-model="form.activation_rule[2].day" :controls="false" :min="0" :step="1" :precision="2" class="w-24" placeholder="天数" />
          </el-form-item>
          <div class="whitespace-nowrap mx-2">天，商品销量在</div>
          <VGroup>
            <el-form-item label-width="0" class="mb-0" :error="errors['activation_rule.2.sale_start']">
              <el-input-number v-model="form.activation_rule[2].sale_start" :controls="false" :min="0" :step="1" :precision="2" class="w-24" placeholder="销量" />
            </el-form-item>
            <div class="v-group-item">-</div>
            <el-form-item label-width="0" class="mb-0" :error="errors['activation_rule.2.sale_end']">
              <el-input-number v-model="form.activation_rule[2].sale_end" :controls="false" :min="0" :step="1" :precision="2" class="w-24" placeholder="销量" />
            </el-form-item>
          </VGroup>
          <div class="whitespace-nowrap mx-2">范围内，且呆滞库龄天数在</div>
          <VGroup>
            <el-form-item label-width="0" class="mb-0" :error="errors['activation_rule.2.stagnation_start']">
              <el-input-number v-model="form.activation_rule[2].stagnation_start" :controls="false" :min="0" :step="1" :precision="2" class="w-24" placeholder="天数" />
            </el-form-item>
            <div class="v-group-item">-</div>
            <el-form-item label-width="0" class="mb-0" :error="errors['activation_rule.2.stagnation_end']">
              <el-input-number v-model="form.activation_rule[2].stagnation_end" :controls="false" :min="0" :step="1" :precision="2" class="w-24" placeholder="天数" />
            </el-form-item>
          </VGroup>
          <div class="whitespace-nowrap ml-2">范围内时，定义为 <span class="text-red-600">正常</span></div>
        </div>

        <div class="flex items-center text-sm my-5">
          <div class="whitespace-nowrap mr-2">库存数量在</div>
          <VGroup>
            <el-form-item label-width="0" class="mb-0" :error="errors['activation_rule.3.stock_start']">
              <el-input-number v-model="form.activation_rule[3].stock_start" :controls="false" :min="0" :step="1" :precision="2" class="w-24" placeholder="数量" />
            </el-form-item>
            <div class="v-group-item">-</div>
            <el-form-item label-width="0" class="mb-0" :error="errors['activation_rule.3.stock_end']">
              <el-input-number v-model="form.activation_rule[3].stock_end" :controls="false" :min="0" :step="1" :precision="2" class="w-24" placeholder="数量" />
            </el-form-item>
          </VGroup>
          <div class="whitespace-nowrap mx-2">范围内，且呆滞库龄天数在</div>
          <VGroup>
            <el-form-item label-width="0" class="mb-0" :error="errors['activation_rule.3.stagnation_start']">
              <el-input-number v-model="form.activation_rule[3].stagnation_start" :controls="false" :min="0" :step="1" :precision="2" class="w-24" placeholder="天数" />
            </el-form-item>
            <div class="v-group-item">-</div>
            <el-form-item label-width="0" class="mb-0" :error="errors['activation_rule.3.stagnation_end']">
              <el-input-number v-model="form.activation_rule[3].stagnation_end" :controls="false" :min="0" :step="1" :precision="2" class="w-24" placeholder="天数" />
            </el-form-item>
          </VGroup>
          <div class="whitespace-nowrap mx-2">范围内<span class="text-red-600">或</span>全仓可售天数大于</div>
          <el-form-item label-width="0" class="mb-0" :error="errors['activation_rule.3.sale_day']">
            <el-input-number v-model="form.activation_rule[3].sale_day" :controls="false" :min="0" :step="1" :precision="2" class="w-24" placeholder="天数" />
          </el-form-item>
          <div class="whitespace-nowrap ml-2">定义为 <span class="text-red-600">清库</span></div>
        </div>

        <div class="flex items-center text-sm my-3">
          <el-form-item label-width="0" class="mb-0" :error="errors['activation_rule.4.time_type']">
            <VSelect v-model="form.activation_rule[4].time_type" placeholder="请选择" :options="options.time_type" filterable clearable class="w-32" />
          </el-form-item>
          <div class="whitespace-nowrap mx-2">在最近</div>
          <VGroup>
            <el-form-item label-width="0" class="mb-0" :error="errors['activation_rule.4.day_start']">
              <el-input-number v-model="form.activation_rule[4].day_start" :controls="false" :min="0" :step="1" :precision="2" class="w-24" placeholder="天数" />
            </el-form-item>
            <div class="v-group-item">-</div>
            <el-form-item label-width="0" class="mb-0" :error="errors['activation_rule.4.day_end']">
              <el-input-number v-model="form.activation_rule[4].day_end" :controls="false" :min="0" :step="1" :precision="2" class="w-24" placeholder="天数" />
            </el-form-item>
          </VGroup>
          <div class="whitespace-nowrap mx-2">范围内，且刊登的渠道SKU数量在</div>
          <VGroup>
            <el-form-item label-width="0" class="mb-0" :error="errors['activation_rule.4.sku_start']">
              <el-input-number v-model="form.activation_rule[4].sku_start" :controls="false" :min="0" :step="1" :precision="2" class="w-24" placeholder="数量" />
            </el-form-item>
            <div class="v-group-item">-</div>
            <el-form-item label-width="0" class="mb-0" :error="errors['activation_rule.4.sku_end']">
              <el-input-number v-model="form.activation_rule[4].sku_end" :controls="false" :min="0" :step="1" :precision="2" class="w-24" placeholder="数量" />
            </el-form-item>
          </VGroup>
          <div class="whitespace-nowrap ml-2">范围内时，定义为 <span class="text-red-600">新品</span></div>
        </div>
      </el-card>
    </el-form>
    <template #footer>
      <VButton auth="/purchase/demand/basic/rule/save" type="primary" :loading="loadings.save" class="ml-auto" @click="save()">保 存</VButton>
    </template>
  </VPage>
</template>

<script setup lang="jsx">
import api from "./api"
import { getOptionPms } from "@/api/public"
import { ElMessage } from "element-plus"
import { validatorObj } from "@/utils"
import XEUtils from "xe-utils"

const loadings = reactive({ save: false })
const form = ref({
  isr_id: 3,
  estimate_sale_rule: {
    1: {
      day: null,
      end: null,
      start: null,
      percent: null,
    },
    2: {
      day: null,
      end: null,
      start: null,
      percent: null,
    },
    3: {
      day: null,
      end: null,
      start: null,
      percent: null,
    },
  },
  estimate_sale_ratio: {
    1: null,
    2: null,
    3: null,
    4: null,
    5: null,
  },
  not_replenishment_rule: {
    sale_num: null,
    sku_status: [],
  },
  activation_rule: {
    1: {
      day: null,
      sale_end: null,
      sale_start: null,
      stagnation_end: null,
      stagnation_start: null,
    },
    2: {
      day: null,
      sale_end: null,
      sale_start: null,
      stagnation_end: null,
      stagnation_start: null,
    },
    3: {
      sale_day: null,
      stock_end: null,
      stock_start: null,
      stagnation_end: null,
      stagnation_start: null,
    },
    4: {
      day_end: null,
      sku_end: null,
      day_start: null,
      sku_start: null,
      time_type: null,
    },
  },
  demand_rule: {
    // "purchase_day": null,
    demand_day: null,
    transit_day: [],
    safe_day: {},
    middle_process_day: null,
    oversea_shelve_day: null,
  },
  demand_auto_rule: [],
})
const baseName = "intelligent_stock"
// 获取options
const options = ref({})
Promise.all([getOptionPms({ type: baseName }).then((res) => res.data)]).then((res) => {
  options.value = res.reduce((acc, cur) => ((acc = { ...acc, ...cur }), acc), {})
})
api.detail().then((res) => {
  form.value = XEUtils.merge(form.value, res.data)
  if (!form.value.demand_auto_rule) {
    form.value.demand_auto_rule = []
  }
})

const errors = reactive({})

watch(
  () => form.value.estimate_sale_rule,
  (estimate_sale_rule) => {
    for (const key in estimate_sale_rule) {
      validatorObj("estimate_sale_rule." + key, form.value, errors)
    }
  },
  {
    deep: true,
  }
)
watch(
  () => form.value.activation_rule,
  (activation_rule) => {
    for (const key in activation_rule) {
      validatorObj("activation_rule." + key, form.value, errors)
    }
  },
  {
    deep: true,
  }
)

const save = async () => {
  if (Object.values(errors).length) {
    ElMessage.error("校验不通过")
    return
  }
  loadings.save = true
  try {
    await api.save(form.value)
    ElMessage.success("保存成功")
  } catch (error) {
    console.debug("error", error)
  }
  loadings.save = false
}
</script>

<style lang="scss">
.no-border {
  .el-card {
    border: 0;
  }
}
.mb-0 {
  margin-bottom: 0;
}
</style>
